<template>
  <div>
    <!-- setupcard -->
    <el-card class="setup-card">
      <el-form :model="setupForm"
               ref="setupForm"
               :rules="rules"
               label-width="100px">
        <el-form-item label="用户名："
                      prop="account">
          <el-input v-model="setupForm.account"></el-input>
        </el-form-item>
        <el-form-item label="密码："
                      prop="psw">
          <el-input v-model="setupForm.psw"
                    type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码："
                      prop="psw2">
          <el-input v-model="setupForm.psw2"
                    type="password"></el-input>
        </el-form-item>
        <div style="margin: auto">
          <el-button type="primary"
                     @click="onSubmit"
                     :loading="loading">注册</el-button>
        </div>
      </el-form>
    </el-card>
    <div style="margin-top: 10px; text-align: center;">
      <router-link to="/login">
        已有账号？立即登录
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    var validatePsw2 = (rule, value, callback) => {
      if (value !== this.setupForm.psw) {
        callback(new Error('两次输入的密码不一致，请重新输入'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      setupForm: {
        account: '',
        psw: '',
        psw2: ''
      },
      rules: {
        account: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        psw: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        psw2: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: validatePsw2, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    onSubmit () {
      var cur = this
      this.$refs.setupForm.validate((valid) => {
        if (valid) {
          cur.loading = true
          cur.axios.post('register', {
            userAccount: cur.setupForm.account,
            password: cur.setupForm.psw
          })
            .then(response => {
              if (response.status === 200) {
                if (response.data.err === 200) {
                  cur.$notify({
                    title: '注册成功',
                    message: '请登录',
                    position: 'top-left'
                  })
                  cur.loading = false
                  cur.$router.replace('/login') // 跳转登录界面
                } else {
                  cur.$notify({
                    title: '注册失败',
                    message: response.data.message,
                    position: 'top-left'
                  })
                  cur.loading = false
                }
              } else {
                cur.$notify({
                  title: '注册失败',
                  message: '网络错误',
                  position: 'top-left'
                })
                cur.loading = false
              }
            })
            .catch(error => {
              console.log(error)
              cur.$notify({
                title: '注册失败',
                message: '网络错误',
                position: 'top-left'
              })
              cur.loading = false
            })
        } else {
          console.log('error submit')
          return false
        }
      })
    }
  }
}
</script>

<style>
.setup-card {
  width: 400px;
  margin: auto;
  margin-top: 15%;
  text-align: center;
}
</style>
